<template>
  <div class="header">
    <div class="head-row">
      <div class="menu" :class="{ active: isCollapse }" @click="handleToggle">
        <span></span>
        <span></span>
        <span></span>
      </div>
    </div>
    <img
      :src="
        lang === 'en' ? require('@/assets/images/logo_en.svg') : require('@/assets/images/logo.svg')
      "
      alt="logo"
      class="logo"
      :class="{ active: lang === 'en' }"
      @click="goHome"
    />

    <div class="head-row active">
      <div class="menu">
        <i class="el-input__icon el-icon-search" @click="toSearch"></i>
      </div>
      <img
        :src="require('@/assets/images/icon-lang.png')"
        alt="logo"
        class="icon-lang"
        @click="handleLangToggle"
      />
    </div>
    <ul class="header-nav" :class="{ active: isCollapse }">
      <li v-for="item in menus" :key="item.id">
        <div
          class="top-title"
          :class="{
            'has-child': item.children && !!item.children.length && false,
            active: selected[item.id],
            selected: item.path === path,
          }"
          @click="() => handleExtend(item)"
        >
          {{ item[lang] }}
        </div>
        <div
          v-if="item.children && !!item.children.length && false"
          class="nav-box"
          :class="{
            active: selected[item.id],
          }"
        >
          <div v-for="sub in item.children" :key="sub.id" class="subnav">
            <div
              class="top-title"
              :class="{
                'has-child': sub.children && !!sub.children.length,
                active: selected[sub.zIndex],
                selected: sub.path === path,
              }"
              @click="() => handleExtend(item, sub)"
            >
              {{ sub[lang] }}
            </div>
            <div
              v-if="sub.children && !!sub.children.length"
              class="nav-box"
              :class="{
                active: selected[sub.zIndex ?? sub.id],
              }"
            >
              <div
                v-for="subItem in sub.children"
                :key="subItem.id"
                class="subnav-in"
                @click="() => handleExtend(sub, subItem)"
              >
                {{ subItem[lang] }}
              </div>
            </div>
          </div>
        </div>
      </li>
    </ul>
    <ul class="lang-nav" :class="{ active: isLang }">
      <nuxt-link
        v-for="locales in showLocales"
        :key="locales.code"
        :class="{ active: $i18n.locale === locales.code }"
        :to="switchLocalePath(locales.code)"
      >
        <span @click="handleChangeLang(locales.code)">{{ locales.name }}</span>
      </nuxt-link>
    </ul>
  </div>
</template>

<script>
import { mapState } from 'vuex'

import { INDEX_PATH } from '@/const/platform'

export default {
  data() {
    return {
      isCollapse: false,
      isLang: false,
      selected: {},
    }
  },
  computed: {
    ...mapState(['menus', 'lang']),
    path() {
      return this.$route.path
    },
    showLocales() {
      return this.$i18n.locales
    },
  },
  methods: {
    handleToggle() {
      this.isCollapse = !this.isCollapse
      this.isLang = false
      document.body.style.overflow = this.isCollapse ? 'hidden' : 'auto'
    },
    handleLangToggle() {
      this.isLang = !this.isLang
      this.isCollapse = false
      document.body.style.overflow = this.isLang ? 'hidden' : 'auto'
    },
    handleExtend(item) {
      this.isCollapse = false
      this.$router.push({
        path: item.path,
      })
      document.body.style.overflow = 'auto'
    },
    goHome() {
      const path = this.$route.path
      // 已经在首页，不跳转
      if (['/zh/', '/', '/zh'].includes(path)) {
        return
      }
      this.isCollapse = false
      this.$router.push(INDEX_PATH)
      document.body.style.overflow = 'auto'
    },
    toSearch() {
      this.isCollapse = false
      this.isLang = false
      if (this.$route.path.includes('/search')) {
        return
      }
      this.$router.push({
        path: '/search',
        query: {
          keyword: this.keyword,
        },
      })
      this.keyword = ''
    },
    handleChangeLang(lang) {
      this.$store.commit('update', {
        lang,
      })
      this.$cookies.set('lang', lang)
      this.isLang = false
      document.body.style.overflow = 'auto'
    },
  },
}
</script>

<style lang="less" scoped>
@import '~assets/var';

.header {
  width: 100%;
  height: 50px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  border-bottom: 1px solid #f1f1f1;
  position: fixed;
  top: 0;
  z-index: 21;

  .head-row {
    display: flex;
    align-items: center;
    width: 100px;
    height: 100%;

    &.active {
      justify-content: flex-end;
    }

    .icon-lang {
      width: 19px;
      height: 19px;
      margin-left: 16px;
      margin-top: 4px;
    }
  }

  .menu {
    width: 18px;
    height: 12px;
    position: relative;
    margin-top: -2px;

    &.active {
      span {
        opacity: 0;
      }

      span:first-child {
        top: 6px;
        transform: rotate(45deg);
        opacity: 1;
      }

      span:last-child {
        transform: rotate(-45deg);
        bottom: 5px;
        opacity: 1;
      }
    }

    span {
      position: absolute;
      display: block;
      width: 18px;
      height: 2px;
      background: #76838d;
      border-radius: 3px;
      margin-top: -1px;
      top: 50%;
      transition: all 0.5s ease;

      &:first-child {
        top: 0;
      }

      &:last-child {
        top: auto;
        bottom: -1px;
      }
    }

    .el-icon-search {
      font-size: 18px;
      margin-top: -24px;
      cursor: pointer;
    }
  }

  .header-nav {
    transition: all 0.2s ease;
    z-index: 99;
    background: #fff;
    position: fixed;
    top: 90px;
    left: 0;
    color: #001c3d;
    overflow: auto;
    width: 100%;
    bottom: 100%;
    list-style: none;
    padding: 0;

    &.active {
      top: 50px;
      bottom: 0;
      background: #fff;
    }

    & > li {
      background: #fff;

      .nav-box {
        transition: all 0.5s ease;
        max-height: 0;
        overflow: hidden;

        &.active {
          max-height: 3000px;
        }
      }

      .top-title {
        display: flex;
        height: 48px;
        justify-content: space-between;
        align-items: center;
        padding: 0 24px;
        position: relative;

        &.selected {
          color: #0261bc;
        }

        &.has-child.active {
          &::after {
            transform: rotate(225deg);
          }
        }

        &.has-child::after {
          content: '';
          display: block;
          position: absolute;
          width: 8px;
          height: 8px;
          border-radius: 1px;
          border-left: 1px solid #898989;
          border-top: 1px solid #898989;
          top: 21px;
          right: 20px;
          transform: rotate(135deg);
          transform-origin: center;
          transition: all 0.5s ease;
        }
      }

      .subnav {
        background-color: #f0f0f0;
      }

      .subnav-in {
        height: 48px;
        line-height: 48px;
        padding-left: 45px;
      }
    }
  }

  .lang-nav {
    transition: all 0.2s ease;
    z-index: 98;
    background: #fff;
    position: fixed;
    top: 50px;
    bottom: 100%;
    left: 0;
    color: #3b4755;
    overflow: auto;
    width: 100%;
    list-style: none;
    padding: 0;

    &.active {
      top: 50px;
      bottom: 0;
      background: #fff;
    }

    a {
      line-height: 48px;
      height: 48px;
      padding-left: 24px;
      display: block;
      cursor: pointer;
      color: #333;
      border-bottom: 1px solid #f1f1f1;

      &.active {
        color: #0261bc;
      }

      span {
        display: block;
        width: 100%;
        height: 100%;
      }
    }
  }

  .logo {
    width: 70px;
    height: 21px;

    &.active {
      width: 95px;
      height: 26px;
    }
  }
}
</style>
